<template>
  <li>
    <div
      class="cata"
      :class="isFolder ? '' : 'subpadding'"
      @click.stop="backTable">
      <span v-if="isFolder" @click.stop="toggle" class="cata-icon" style="font-size: 12px"><i :class="open ? 'el-icon-minus' : 'el-icon-plus'"></i></span>
      <span class="cata-name">
            <i class="el-icon-document"></i>
            <i class="icon iconfont icon-chakanxinxi"></i>
            <span class="cata-warp directory-browsing" :title="model.name">{{model.name}}</span>
          </span>
      <div class="add" v-if="hasManage">
        <div v-if="!model.oparateBtn" class="addbn">
          <i class="icon iconfont icon-zhankai" @click.stop="handlerChange('addChild', model)"></i>
        </div>
        <div v-if="model._id!=='0'" class="editbn">
          <i class="icon iconfont icon-beizhu" @click.stop="handlerChange('editChild', model)"></i>
        </div>
        <div v-if="model._id!=='0'" class="deletebn">
          <i class="icon iconfont icon-guanbi" @click.stop="handlerChange('deleteChild', model)" v-show="!forbiddenDelete"></i>
        </div>
      </div>
      <!--</router-link>-->
    </div>
    <ul v-show="open" v-if="isFolder" class="subcata" :class="model._id==='0' ? 'no-border': ''">
      <item
        class="item"
        v-for="model in model.childs"
        :model="model"
        :kmType="kmType"
        @childId="childId"
        @addChild="handlerSelfChange"
        @editChild="handlerSelfChange"
        @deleteChild="handlerSelfChange"
        :hasManage="hasManage"
        :forbiddenDelete="forbiddenDelete"
        :type="type"
       ></item>
    </ul>
  </li>
</template>
<script>
  export default {
    name: 'item',
    data () {
      return {
        backT: false,
        open: this.model._id === '0'
      }
    },
    props: {
      model: Object,
      kmType: {
        type: String,
        default: 'inner'
      },
      hasManage: Boolean,
      forbiddenDelete: Boolean,
      type: String
    },
    computed: {
      getId () {
        return this.$route.path
      },
      isFolder () {
        return this.model.childs && this.model.childs.length
      }
    },
    methods: {
      childId (id) {
        this.$emit('childId', id)
      },
      bindData () {
        this.Type = this.kmType
      },
      toggle: function () {
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      // jumpToUrl () {
      //   if (this.type !== 'webchat') {
      //     let urlObj = this.model._id === '0' ? {path: this.getId} : {path: '/index/km/' + this.kmType + '/' + this.model._id}
      //     this.$router.push(urlObj)
      //   } else {
      //     this.$emit('childId', this.model._id)
      //   }
      // },
      backTable (id) {
        if (this.type !== 'webchat') {
          this.backT = !this.backT
          this.open = true
//          let urlObj = this.model._id === '0' ? {path: '/index/km/' + this.kmType + '/curupdate'} : {path: '/index/km/' + this.kmType + '/' + this.model._id}
          let urlObj = this.model._id === '0' ? {path: '/index/km/' + this.kmType + '/all'} : {path: '/index/km/' + this.kmType + '/' + this.model._id}
          this.$router.push(urlObj)
          this.$store.commit('km/REFRESH_RIGHT', {type: 'init'})
          this.$store.commit('km/BACK_TABLE', this.backT)
        } else {
          this.$emit('childId', this.model._id)
        }
      },
      changeType: function () {
        if (!this.isFolder) {
          this.$set(this.model, 'childs', [])
          this.open = true
        }
      },
      handlerChange (event, val) {
        this.$emit(event, {event, val})
      },
      handlerSelfChange (val) {
        this.$emit(val.event, val)
      }
    },
    created () {
      this.bindData()
    },
    components: {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl";
  .el-icon-document
    color $c-main
    padding-right 4px
    font-size 14px
    font-weight 500
  .iconfont
    font-size 14px 
  .icon-chakanxinxi
    display none
  .editbn,.addbn,.deletebn
    display inline
    padding 0 6px
  .editbn,.addbn
    color $c-main
  .deletebn
    color $c-pink
  .cata
    line-height 30px
    padding-right 6px
    font-size 14px
    position relative
    left -8px
    cursor pointer
    color $cf-gray2
    font-weight 700
    border-radius 2px
    span
      .el-icon-minus,.el-icon-plus
        transform scale(0.75)
        border 1px solid $cf-gray5
        padding 1px
        color $cf-gray5
        margin-right 5px
    .cata-warp
      display inline-block
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
      max-width 80px
      position absolute
  .add
    float right
  .tree>.item>a>.cata:first-child
    .cata-icon
      display none
      font-size 12px
    .cata-name
      font-size 16px
      .el-icon-document
        display none
      .icon-chakanxinxi
        display inline-block
        width 23px
        height 23px
        line-height 23px
        text-align center
        border-radius 23px
        border 1px solid $c-main
        color $c-main
        margin-right 3px
    .add
      .editbn,.deletebn
        display none
  .router-link-active
    background #eee
  .subcata
    padding-left 16px
    border-left 1px solid #e0e3e6
    box-sizing border-box
    .item
      .cata
        .cata-warp
          font-size 12px
          font-weight 400
          color $cf-gray1
  .cata-icon+.cata-name .el-icon-document
    display none
  .no-border
    border 0  
</style>
